<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '下单',
  },
}
</route>

<template>
  <view class="place-order" v-if="hotelInfo.id">
    <!-- 房型信息 -->
    <RoomInfo :hotel="hotelInfo" :dateInfo="dateInfo" />

    <!-- 入住人信息 -->
    <Occupant @occupant="occupantChange" />

    <!-- 订单信息 -->
    <OrderInfo :hotel="hotelInfo" :dateInfo="dateInfo" :unifiedAmount="unifiedAmount" />

    <BottomBar
      :hotel="hotelInfo"
      :dateInfo="dateInfo"
      :occupant="occupant"
      :unifiedAmount="unifiedAmount"
    />
  </view>
  <Seat v-else :loading="loading" />
</template>

<script lang="ts" setup>
import dayjs from 'dayjs'
import { useHotelSearch } from '@/store/hotelSearch'
import { getRoomNight, dateTransformText } from '@/components/Calendar/utils'
import RoomInfo from './components/RoomInfo'
import Occupant from './components/Occupant'
import OrderInfo from './components/OrderInfo'
import BottomBar from './components/BottomBar'

const { searchInfo } = useHotelSearch()
const hotelInfo = reactive<any>({})
const loading = ref(false)

let id = null
onLoad((query) => {
  if (query.id) {
    id = query.id
    getData()
  }
})

function getData() {
  if (id) {
    loading.value = true
    uni.showLoading()
    http
      .get('/hotels-layout-app/open/detail', {
        id,
        enterDate: searchInfo.startDate + ' 00:00:00',
        leaveDate: searchInfo.endDate + ' 23:59:59',
      })
      .then((res: any) => {
        Object.assign(hotelInfo, res)

        uni.setNavigationBarTitle({
          title: res.name,
        })

        getUnifiedAmount()
      })
      .finally(() => {
        loading.value = false
        uni.hideLoading()
      })
  }
}

// 入住日期信息
const dateInfo = reactive({
  // 开始日期
  startDate: dayjs(searchInfo.startDate).format('MM月DD日'),
  startDate2: dayjs(searchInfo.startDate).format('MM.DD'),
  // 开始日期文字
  startDateText: dateTransformText(searchInfo.startDate),
  // 结束日期
  endDate: dayjs(searchInfo.endDate).format('MM月DD日'),
  endDate2: dayjs(searchInfo.endDate).format('MM.DD'),
  // 结束日期文字
  endDateText: dateTransformText(searchInfo.endDate),
  // 间夜信息
  roomNight: getRoomNight(searchInfo.startDate, searchInfo.endDate),
})

// 入住人
const occupant = ref(null)
function occupantChange(res) {
  occupant.value = res
}

// 获取价格信息
const unifiedAmount = ref(null)
function getUnifiedAmount() {
  http
    .get('/room-order-app/getUnifiedAmount', {
      layoutId: hotelInfo.id,
      enterDate: hotelInfo.enterDate,
      leaveDate: hotelInfo.leaveDate,
    })
    .then((res: any) => {
      unifiedAmount.value = res
    })
}
</script>

<style lang="scss" scoped>
.place-order {
  box-sizing: border-box;
  min-height: 100vh;
  padding-top: 26rpx;
  padding-bottom: 160px;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 160rpx) !important;
  padding-bottom: calc(env(safe-area-inset-bottom) + 160rpx) !important;
  background-color: var(--bgc4);
}
</style>
